<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" only-query @search="search">
      <el-button
        class="refresh-btn"
        size="mini"
        type="primary"
        icon="el-icon-refresh"
        @click="resetListQuery">重置</el-button>
    </filter-form>
    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic">
      <base-table
        :height="this.height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-operation="tableData.showOperation"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor">
        <template slot="operations" slot-scope="{row, $index}">
          <el-button
            class="el-icon-defined"
            style="color: #009900;"
            size="mini"
            @click="receive(row,$index)">接收</el-button>
          <el-button
            class="el-icon-defined"
            style="color: #009900;"
            size="mini"
            @click="report(row,$index)">进度填报</el-button>
        </template>
      </base-table>
    </div>
    <!-- 表格 -->

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="changePageOption" />
    </div>
    <!-- 分页 -->
    <!-- 新增或编辑弹框 -->
    <!--    <DataAddOrEdit :dialog="dialog" @updateData="report" />-->
  </div>
</template>
<script>
import { tableMixin } from '@/utils/public'
import { parseTime } from '@/utils'
import { findAllUnitDeptList, getLineList, railtypeList } from '@/api/platform'
import { getListPage } from '@/api/cms/Analysis-management/Analysis-progress/ProgressReporting'
export default {
  name: 'ProgressReporting2C',
  components: {
    // DataAddOrEdit
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: '100%',
      // 顶部操作栏配置
      filterData: {
        unitDeptCode: {
          width: 'auto',
          clearable: true,
          key: 'preparedDeptId',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' }
        },
        lines: {
          width: 'auto',
          clearable: true,
          key: 'lineId',
          type: 'select',
          title: '线路',
          placeholder: '请选择线路',
          options: [], // 装置类型,
          props: {
            label: 'lineName',
            value: 'lineId'
          }
        },
        status: {
          width: 'auto',
          clearable: true,
          key: 'value',
          type: 'select',
          title: '状态',
          placeholder: '请选择状态',
          options: [
            { label: '已下发', value: '1' },
            { label: '分析中', value: '3' },
            { label: '已完成', value: '4' }
          ], // 装置类型,
          props: {
            label: 'label',
            value: 'value'
          }
        },
        postDate: {
          width: 'auto',
          type: 'date',
          dateType: 'daterange',
          rangeSeparator: '至',
          startPlaceholder: '开始年月',
          endPlaceholder: '结束年月'
        }
      },
      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20
      },
      // 表格数组
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'deptName', label: '单位' },
          { prop: 'detaileName', label: '分析人' },
          { prop: 'taskDate', label: '任务日期', formatter: row => parseTime(row.planYear, '{y}') },
          { prop: 'lineName', label: '线路' },
          { prop: 'directionName', label: '行别' },
          { prop: 'startSiteName', label: '开始区站' },
          { prop: 'beginPillarNum', label: '开始支柱号' },
          { prop: 'startRoadMark', label: '开始公里标' },
          { prop: 'endSiteName', label: '结束区站' },
          { prop: 'endPillarNum', label: '结束支柱号' },
          { prop: 'endRoadMark', label: '结束公里标' },
          { prop: 'jobNum', label: '工作量（根）' },
          { prop: 'checkBy9', label: '已分析支柱数' },
          { prop: 'checkBy10', label: '个人进度' },
          { prop: 'status', label: '状态', formatter: (row) => (row.planStatus === '1' ? '编制中' : row.planStatus === '4' ? '不通过，待编制' : row.planStatus === '2' ? '已提交' : row.planStatus === '3' ? '已发布' : '') }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '150px',
        defaultOperations: [],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },
      // 弹框
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        dataList: {
          lineList: []
        },
        form: {}
      }
    }
  },
  created() {
    this.getListPage()
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取下拉数据、字典
    getList() {
      // 获取单位
      findAllUnitDeptList({}).then(response => {
        this.filterData.unitDeptCode.options = response.data
      })
      // 线路类型
      railtypeList().then(response => {
        this.filterData.railTypes.options = response.data
      })
      // 线路
      getLineList().then((response) => {
        this.filterData.lines.options = response.data
      })
    },
    getListPage() {
      this.tableData.loading = true
      getListPage(this.listQuery).then(response => {
        console.log(response)
        this.tableData.tableList = response.data.records
        this.tableData.total = response.data.total
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
    },
    report(row, $index) {
      this.currentRow = [row]
      const dialog = {
        title: '查看',
        type: 'look',
        visible: false,
        disabled: true,
        loading: false,
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },
    // 接收
    receive(row, $index) {
      this.confirmBox(`确定删除这条数据?`)
        .then(() => {
          // eslint-disable-next-line no-undef
          deleteData(row.id).then(response => {
            this.notifiySuccess('删除成功!')
            this.getListPage()
          })
        })
        .catch(() => {})
    },
    // 查询
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },
    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage()
    },
    // 重置查询
    resetListQuery() {
      this.listQuery = {
        page: 1,
        size: 20
      }
      this.getListPage()
    }
  }
}
</script>

